<script setup>
import ProfileIcon from '@/component/mainpage/profileIcon.vue'
import { computed } from 'vue'
import { useUserStore } from '@/stores/user'

const userStore = useUserStore()
const nickname = computed(() => userStore.nickename)
const grade = computed(() => Number(userStore.grade) || 0)
const experience = computed(() => Number(userStore.experience) || 0)
const expMax = 5000
const expRatio = computed(() => Math.max(0, Math.min(1, experience.value / expMax)))
</script>

<template>
  <div class="personal-center">
    <div class="personal-content">
      <!-- 头像 -->
      <div class="pc-left">
        <ProfileIcon />
      </div>
      <!-- 昵称和等级 -->
      <div class="pc-center">
        <div class="pc-center-top">{{ nickname }}</div>
        <div class="pc-center-bottom">
          <div class="level">Lv. {{ grade }}</div>
          <div class="exp">
            <div class="exp-text">{{ experience }} / {{ expMax }}</div>
            <div class="exp-bar">
              <div class="exp-bar-fill" :style="{ width: (expRatio * 100) + '%' }"></div>
            </div>
          </div>
        </div>
      </div>
      <!-- 占位 -->
      <div class="pc-right">
      </div>
    </div>
  </div>
</template>

<style scoped>
.personal-center {
  width: 100%;
  height: 100%;
  /* 外层容器透明，仅用于定位内部布局 */
}
.personal-content {
  width: 60%; /* 3/5 宽度 */
  height: 100%;
  border-radius: 8px;
  display: flex;
  align-items: stretch;
  gap: 12px;
  padding: 12px;
}
.pc-left {
  height: 100%;
  aspect-ratio: 1 / 1; /* 宽高相等的正方形 */
  border-radius: 8px;
}
.pc-center {
  flex: 1 1 auto;
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 12px;
}
.pc-right {
  width: 50px; /* 占位宽度，可后续调整 */
}
.pc-center-top {
  font-size: 27px; /* 加大昵称字体 */
  color: #fff;
  font-weight: 700;
  padding-top: 6px;
  text-align: left;
  margin-left: 12px; /* 略微右移 1px */
}
.pc-center-bottom {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 12px;
  height: 100%;
}
.level {
  border-radius: 12px;
  font-weight: bolder;
  color: #fff;
  align-self: center; /* 竖直居中 */
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 25px; /* 放大等级字体 */
}
.exp {
  display: grid;
  grid-template-rows: auto auto;
  gap: 6px;
}
.exp-text {
  font-size: 15px;
  color: #fff;
}
.exp-bar {
  height: 10px;
  width: 50%; /* 进度条总宽度减半 */
  background: #fff; /* 未填充部分使用白色 */
  border-radius: 999px;
  overflow: hidden;
}
.exp-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #69b1ff, #1677ff);
}
</style>


